<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        
        <title>Input Text Replacement</title>
        
        <!-- Javascript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.input_replacement.js"></script>
    
        <script type="text/javascript">
        
            $(function() {

                $('#search').input_replacement({ class: 'input-placeholder' });
                $('#username').input_replacement({ text: 'Username', class: 'input-placeholder' });
                $('#password').input_replacement({ text: 'Password' });

            }); 
        
        </script>
        
        <style type="text/css" media="screen">
            .input-placeholder {
                color: #ccc;
                font-style: italic;
            }
        </style>
    
    </head>
    <body>
        
        <h3>Search</h3>
        <form action="" method="post">
            <p>
                <input type="text" name="search" id="search" value="" /> 
                <input type="submit" name="submit" id="submit" value="Go" />
            </p>
        </form>
        
        <hr />
        
        <h3>Login</h3>
        <form action="" method="post">
            <p><input type="text" name="username" id="username" value="" /></p>
            <p><input type="password" name="password" id="password" value="" /></p>
            <p><input type="submit" name="submit" id="submit" value="Login" /></p>
        </form>
        
    </body>
</html>